<template>
	<view class="search-box m-b-25">
		<uv-input :placeholder="props.data.keywords" prefixIcon="search"
			prefixIconStyle="font-size: 22px;color: #909399" border="surround" :shape="hanldeCircle()"
			v-model="inputVal" @confirm="handleSearch"></uv-input>
		<view class="search-tit" @click="handleSearch">搜索</view>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { handleRouteNavigateTo } from '@/core/utils';

	const props = withDefaults(defineProps<{
		data : any,
	}>(), {
		data: {},
	});

	let inputVal = ref('');

	const handleSearch = () => {
		handleRouteNavigateTo(`/pages/category/category?key=${inputVal.value}`);
	}

	const hanldeCircle = () => {
		if (props.data.style === 'radius') {
			return 'square'
		}
		if (props.data.style === 'round') {
			return 'circle'
		}
		return 'square';
	}
</script>

<style lang="scss" scoped>
	@import "./home-search.scss";
</style>